<template>
<div class="home-side-bar">
  <div class="side-bar">
    <div class="side-bar-title">分类</div>
    <div class="side-bar-content">
      <div v-for="category in categoryList" :key="category.categoryId">{{category.categoryName}}</div>
    </div>
  </div>
</div>
</template>

<script>
export default {
  name: 'SideBar',
  data () {
    return {
      categoryList: [
        {
          categoryId: 10001,
          categoryName: 'Java'
        },
        {
          categoryId: 10002,
          categoryName: 'Java企业微信开发示例教程'
        },
        {
          categoryId: 10003,
          categoryName: 'spring'
        },
        {
          categoryId: 10004,
          categoryName: 'mysql'
        }
      ]
    }
  }
}
</script>

<style lang="stylus" scoped>
.home-side-bar
  display flex
  .side-bar
    max-width 230px
    font-size: 14px;
    color: #616161;
    .side-bar-title
      padding 10px 5px
      border-bottom: 1px solid #4CAF50;
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
      background #4CAF50
    .side-bar-content
      border-radius: 10px
      box-shadow: 1px 1px 2px #A7A8AD;
      div
        padding 10px 10px
        border-bottom: 1px solid #DADFE1;
        border-top: 1px solid #FFFFFF;
        overflow: hidden;
        background #fff

</style>
